<template>
    <v-card>
        <v-banner color="white" style="height: 100px" sticky>
            <span class="ma-2 float-left">
                <v-btn color="primary" @click="saveConfig">保存配置</v-btn>
            </span>
            <span class="ma-2 float-right" >
                <v-btn @click="goBack">返回</v-btn>
            </span>
        </v-banner>
        <v-data-table
                :headers="headers"
                :items="dbColumns"
                item-key="columnName"
                hide-default-footer
                disable-pagination
                class="elevation-1">
            <!--每一行后面的操作按钮 -->
            <template v-slot:item.isQueryParam="{ item }">
                <v-checkbox v-model="item.isQueryParam"></v-checkbox>
            </template>

            <!--每一行后面的操作按钮 -->
            <template v-slot:item.showInTable="{ item }">
                <v-checkbox v-model="item.showInTable"></v-checkbox>
            </template>

            <!--每一行后面的操作按钮 -->
            <template v-slot:item.addEdited="{ item }">
                <v-checkbox v-model="item.addEdited"></v-checkbox>
            </template>
        </v-data-table>
    </v-card>
</template>

<script>
    import Databases from "../utils/databases";

    export default {
        name: "TableColumnConfig",
        props:['dbConfig','tableInfo'],
        data() {
            return {
                dbColumns: [],
                headers: [
                    {
                        text: '表字段名称',
                        align: 'start',
                        sortable: false,
                        value: 'columnName',
                    },
                    { text: '字段说明(comment)', value: 'columnComment' },
                    { text: '数据库字段类型', value: 'columnType' },
                    { text: '是否允许为空', value: 'isNullable' },
                    { text: '字段长度', value: 'maximumLength' },
                    { text: '是否前端Table查询参数', value: 'isQueryParam', sortable: false },
                    { text: '是否在前端Table中显示', value: 'showInTable', sortable: false },
                    { text: '是否在前端新增修改', value: 'addEdited', sortable: false }
                ],
            }
        },
        created () {
            this.initialize()
        },
        methods:{
            initialize(){
                new Databases(
                    this.dbConfig.dbType,
                    this.dbConfig.dbHost,
                    this.dbConfig.dbPort,
                    this.dbConfig.dbUser,
                    this.dbConfig.dbPwd,
                    this.dbConfig.dbName,
                ).getColumnInfo(this.tableInfo.tableName).then(results => {
                    this.dbColumns = results  //取出生成字段的基本配置(前五个字段)
                    //后三个字段
                    let lowdbColumns = this.$db.get(this.tableInfo.tableName + '_column_config').value()
                    if(lowdbColumns){
                        //将数据库字段配置与页面勾选配置合并
                        this.dbColumns = this.dbColumns.map(el => {
                            el.isQueryParam = lowdbColumns.find(item => item.columnName === el.columnName).isQueryParam;
                            el.showInTable = lowdbColumns.find(item => item.columnName === el.columnName).showInTable;
                            el.addEdited = lowdbColumns.find(item => item.columnName === el.columnName).addEdited;
                            return el;
                        })
                    }
                }).catch(error =>{
                    this.$dialog.error({
                        text: error,
                        title: '出现错误'
                    })
                })
            },
            saveConfig(){
                this.$db.set(this.tableInfo.tableName
                    + '_column_config', this.dbColumns)
                    .write()
                this.$dialog.confirm({
                    text: '配置已经保存成功！',
                    actions:{true: '知道了'}
                })
            },
            goBack(){
                this.$router.back();
            }
        }
    }
</script>

<style scoped>

</style>